<!doctype html>
<html>
<head>
	<title>Chart Frame :: Series</title>
	<script src="../../../codebase/webix.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="../../../codebase/webix.css">
</head>
<body>
	<style type="text/css">html, body{ height:100%; }</style>
	<div id="chartDiv" style="width:600px;height:450px;margin:20px"></div>
	<div style="margin:20px;">
		<input type="button" value="Get Data" onClick="getData()"/>
		<input type="button" value="Get X scale" onClick="getScale()"/>
		<br><br>
		<div id="result"></div>
	</div>    
		<script>

		var data = [];
		for (var i=0; i<=200; i++)
			data.push({ time: i+1,
						sales: Math.round(Math.random()*5000+2000),
						sales2: Math.round(Math.random()*5000+2000)*0.5
			});

		var chart = {
			view:"chart", id:"dchart",
			type:"spline",
			value:"#sales#",
			xAxis:{ template:"#time#" },
			yAxis:{},
			series:[
                {
                    value:"#sales#",
                    item:{
                        borderColor: "#1293f8",
                        color: "#ffffff"
                    },
                    line:{
                        color:"#1293f8",
                        width:3
                    },
                    tooltip:{
                        template:"#sales#"
                    }
                },
                {
                    value:"#sales2#",
                    item:{
                        borderColor: "#66cc00",
                        color: "#ffffff"
                    },
                    line:{
                        color:"#66cc00",
                        width:3
                    },
                    tooltip:{
                        template:"#sales2#"
                    }
                }
            ],
			item:{
				borderColor: "#1293f8",
				color: "#ffffff"
			}
		};

		var range = {
			view:"rangechart", height: 80, id:"range",
			type:"line",
			padding:0,
			series:[
                {
                    value:"#sales#",
                    item:{ radius: 0 },
                    line:{
                        color:"#1293f8",
                        width:1
                    }
                },
                {
                    value:"#sales2#",
                    item:{ radius: 0 },
                    line:{
                        color:"#66cc00",
                        width:1
                    }
                }
            ],
			frameId:"time",
			item: { radius :0 },
			data:  data,
			on: {
				onAfterRangeChange:function(){
					$$("dchart").clearAll();
					$$("dchart").parse(this.getFrameData());
				}
			},
			ready:function(){
				this.setFrameRange({start:30, end:40});
			}
		};

		webix.ui({
			container:"chartDiv", type:"wide",
			rows:[
				chart,
				range
			]
		});

		function getData(index, prop){
			var data = $$("range").getFrameData(index);
			var arr = [];
			for(var i=0; i<data.length; i++)  arr.push(data[i].sales);

			document.getElementById("result").innerHTML = arr.join(", ");
		}
		function getScale(){
			var scale = $$("range").getFrameRange();
			var str = "start: "+scale.start+", end: "+scale.end;

			document.getElementById("result").innerHTML = str;
		}
	</script>
</body>
</html>